<script setup lang="ts"></script>
<template>
<div class="step3-result">
    <DingdingOutlined style="font-size:16px" />
    <div class="top">
        <p class="title">项目名称</p>
        <p class="project">
            <span class="lr">
                <span class="lr_l">项目ID：</span>
                <span class="lr_r">2017-01-10</span>
            </span>
            <span class="lr">
                <span class="lr_l">负责人：</span>
                <span class="lr_r">曲丽丽</span>
            </span>
            <span class="lr">
                <span class="lr_l">生效日期：</span>
                <span class="lr_r">2017-01-10 ～ 2017-01-10</span>
            </span>
        </p>
    </div>
    <!-- 进度条 -->
    <div class="bottom">
        <div>
            <a-steps progress-dot :current="current">
                <a-step :title="step.title" :subTitle="name(step,index)" :description="description(step,index)" v-for="(step,index) in list" :key="index" @click="handleClick(step,index)">
                </a-step>
            </a-steps>
            <div class="icons">
                <div v-for="(item,index) in list" :key="index" class="icon">
                    <img src="@/assets/shape_blue.svg" alt="" class="img" v-if="current==index">
                    <img src="@/assets/shape_gray.svg" alt="" class="img" v-if="index<current">
                </div>
            </div>
        </div>
    </div>
</div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRaw, ref, computed } from "vue";
import { useStore } from "vuex";
import { message } from "ant-design-vue";
import {
  HomeOutlined,
} from '@ant-design/icons-vue';
export default defineComponent({
  computed: {
    name() {
      return (step, index) => {
        return index <= this.current ? step.name : "";
      };
    },
    description() {
      return (step, index) => {
        let str = "";
        if (index < this.current) {
          str = step.time;
        } else if (index == this.current) {
          str = "催一下";
        } else {
          str = "";
        }
        return str;
      };
    }
  },
  setup() {
    const list = [
      {
        title: "材料提交",
        name: "曲丽丽",
        time: "2016-12-12 12:12"
      },
      {
        title: "初审通过",
        name: "周毛毛",
        time: "2016-12-12 12:12"
      },
      {
        title: "电子签名",
        name: "赵丽丽",
        time: "2016-12-12 12:12"
      },
      {
        title: "颁发营业执照、公章",
        name: "钱丽丽",
        time: "2016-12-12 12:12"
      },
      {
        title: "银行开户",
        name: "孙丽丽",
        time: "2016-12-12 12:12"
      }
    ];
    const handleClick = (step, index) => {
      if (current.value == index) {
        console.log(step, index);
        message.success("成功发送催一下", 1);
      }
    };
    const current = ref<number>(0);
    return {
      current,
      list,
      handleClick
    };
  }
});
</script>

<style lang="less" scoped>
.step3-result {
    background-color: rgba(250, 250, 250, 1);
    padding: 24px 40px;

    .title {
        font-size: 16px;
        color: rgba(0, 0, 0, 1);
        margin-bottom: 20px;
    }

    .project {
        margin-bottom: 20px;
    }

    //   进度条
    .bottom {
        position: relative;

        /deep/ .ant-steps-dot,
        .ant-steps-dot.ant-steps-small {
            .ant-steps-item-content {
                width: 160px;
                // .ant-steps-item-subtitle {
                //   display: flex;
                //   align-items: center;
                //   &::after {
                //     @wh: 14px;
                //     content: "dingding";
                //     width: @wh;
                //     height: @wh;
                //     margin-left: 4px;
                //     display: block;
                //     border: 1px solid #f00;
                //   }
                // }
            }

            .ant-steps-item-icon,
            .ant-steps-item-tail {
                margin: 0 0 0 76px;

                &::after {
                    margin-left: 14px;
                }
            }

            .ant-steps-item-process>.ant-steps-item-container>.ant-steps-item-content>.ant-steps-item-description {
                color: rgba(25, 165, 235, 1);
                cursor: pointer;
            }
        }

        .icons {
            position: absolute;
            width: 100%;
            display: flex;
            top: 47px;
            justify-content: space-around;

            .icon {
                @w:60px;
                position: relative;
                left: 6px;
                width: @w;
                .img{
                    width: 12px;
                    position: relative;
                }
                &:nth-child(1){
                    left:40px;
                }
                &:nth-child(2){
                    left:50px;
                }
                &:nth-child(3){
                    left:60px;
                }
                &:nth-child(4){
                    left:70px;
                }
                &:nth-child(5){
                    left:80px;
                }
            }
        }
    }

    .lr {
        // display: flex;
        margin-right: 40px;

        &_l {
            color: rgba(0, 0, 0, 1);
        }

        &_r {
            color: rgba(0, 0, 0, 0.65);
        }
    }
}
</style>
